<template>
    <div class="cart_container">
      <!-- 头部卡片 -->
      <div class="card">
        <div class="card_title flex">
          <div class="buy">全场换购</div>
          <div class="money">已满0.01元，可选择10件商品换购</div>
          <div class="icons">去换购 ></div>
        </div>
        <div class="card_content flex">
          <div class="img">
            <img
              src="https://yanxuan-item.nosdn.127.net/72ffe0a001452f25993d049ea01eb55d.png?imageView&quality=35&thumbnail=146x146"
              width="70" height="70">
          </div>
          <div class="info">
            <div class="info_text">江南特产，西湖藕粉 原味 20克*15袋</div>
            <div class="infoText">原味藕粉 20克*15袋</div>
            <div>
              <text class="Price">换购价</text>
              <text class="money">￥20.8</text>
              <text class="icon"><van-icon name="cart-o" color="red" /></text>
            </div>
          </div>
        </div>
      </div>
  
      <!-- 内容卡片 -->
      <div class="content_card">
        <!-- 内容标题 -->
        <div class="card_title flex">
          <input class="input" type="radio">
          <div class="buy">99元包邮</div>
          <div class="money">已满99元包邮</div>
          <div class="icons">去逛逛 ></div>
        </div>
        <div class="Preferential flex">
          <div class="pre">满赠</div>
          <div class="pres">已满足每满1件领取赠品</div>
          <div class="prev">领取赠品 ></div>
        </div>
        <!-- 内容详情 -->
        <div class="flex_c">
          <div class="content_detail flex" v-for="carts in cartStoreData.cartDataList" :key="carts.id">
            <input class="input" type="radio" v-model="carts.isChecked">
            <div class="detail_img">
              <img
                :src="carts.imgUrl"
                width="90" height="90">
            </div>
          <!-- 内容详情介绍 -->
            <div class="detail_info" >
              <div class="detail_info_top flex">
                <div class="detail_title_left">每日抄底 </div>
                <div class="detail_title_right">{{carts.skuName}}</div>
              </div>
              <div class="detail_content">
                【泰国原芯进口】{{carts.sourceType}}
              </div>
              <div class="detail_info_foot flex">
                <div class="doller">￥</div>
                <div class="money">{{carts.cartPrice}} </div>
                <div class="perv">优惠后 </div>
                <div class="buy">￥{{carts.skuPrice}}</div>
                <div class="icon">x{{carts.skuNum}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
  
  
      <van-submit-bar class="submit" :decimal-length="2" :price="totalPrice * 100" button-text="提交订单">
        <input class="input" type="radio">
        <div class="allcheck">全选</div>
      </van-submit-bar>
      <div class="footer"></div>
        <!-- 底部tabbar组件 -->
        <tabbar></tabbar>
    </div>
  </template>
  
<script setup lang="ts">
import cartStore  from '@/store/cart'
import { onMounted, computed } from "vue"
const cartStoreData = cartStore()

onMounted(() => {
    cartStoreData.getCartList()
    getCartList()
})
const getCartList = async () => {
  // cartStoreData
}

const totalPrice = computed(() => {
  // console.log('cartStoreData', cartStoreData);skuPrice
  let prep = cartStoreData.$state.cartDataList.reduce((item, pre) => {
    return item + pre.skuPrice * pre.skuNum * pre.isChecked
  }, 0)
  return prep
})
console.log('total', totalPrice)
  
  
  </script>
  
  <style scoped lang="less">
  .flex {
    display: flex;
  }
  
  .flex_c {
    display: flex;
    flex-direction: column;
  }
  
  .cart_container {
    background: #f4f4f4;
    width: 100%;
    height: 667px;
    min-height: 100%;
    padding-top: 20px;
  
    .card {
      padding-left: 10px;
      padding-top: 10px;
      background: white;
      width: 355px;
      height: 150px;
      margin: 0 auto;
      border-radius: 5%;
  
      .card_title {
        align-items: center;
  
        .buy {
          width: 64px;
          font-size: 16px;
          font-weight: bold;
          color: #333;
        }
  
        .money {
          width: 206px;
          font-size: 12px;
          padding-left: 20px;
  
        }
  
        .icons {
          width: 50px;
          color: red;
          font-size: 12px;
  
        }
      }
  
      .card_content {
        margin-top: 10px;
  
        .img {
          background: #f4f4f4;
          width: 70px;
          height: 70px;
        }
  
        .info {
          width: 140px;
          font-size: 12px;
          background: #fafafa;
          margin-left: 5px;
          padding: 5px 5px;
  
          .info_text {
            overflow: hidden;
            /*超出部分隐藏*/
            white-space: nowrap;
            /*禁止换行*/
            text-overflow: ellipsis;
            /*省略号*/
  
          }
  
          .Price {
            color: red;
          }
  
          .money {
            color: red;
            font-size: 18px;
          }
  
          .icon {
            margin-left: 20px;
          }
  
        }
      }
    }
  
    .content_card {
      width: 355px;
      background: white;
      margin: 20px auto;
      border-radius: 5%;
  
      .card_title {
        padding-top: 10px;
        align-items: center;
  
        .input {
          width: 19px;
          height: 19px;
          margin-left: 10px;
        }
  
        .buy {
          width: 66px;
          font-size: 16px;
          font-weight: bold;
          color: #333;
          margin-left: 10px;
        }
  
        .money {
          width: 176px;
          font-size: 12px;
          padding-left: 100px;
  
        }
  
        .icons {
          width: 50px;
          color: red;
          font-size: 12px;
          margin-left: 10px;
  
        }
      }
  
      .Preferential {
        height: 42px;
        margin-top: 20px;
  
        .pre {
          width: 36px;
          height: 15px;
          background: #fa1e32;
          color: white;
          font-size: 12px;
          text-align: center;
          border-radius: 10px;
          margin-left: 10px;
        }
  
        .pres {
          width: 227px;
          font-size: 12px;
          color: #89719d;
          margin-left: 5px;
        }
  
        .prev {
          color: #fa8995;
          font-size: 12px;
          margin-left: 10px;
        }
      }
  
      .content_detail {
        margin-bottom: 20px;
        .input {
          margin: auto 0;
          margin-left: 10px;
          width: 19px;
          height: 19px;
        }
  
        .detail_img {
          padding-left: 5px;
          width: 90px;
          height: 90px;
        }
  
        .detail_info {
          margin-left: 10px;
  
          .detail_info_top {
            .detail_title_left {
              font-size: 15px;
              color: #FA1E32;
            }
  
            .detail_title_right {
              color: #a7a7a7;
              margin-left: 5px;
              width: 140px;
              font-size: 15px;
              overflow: hidden;
              /*超出部分隐藏*/
              white-space: nowrap;
              /*禁止换行*/
              text-overflow: ellipsis;
              /*省略号*/
  
            }
          }
  
          .detail_content {
            width: 200px;
            font-size: 12px;
            background: #f4f4f4;
            color: #979797;
            overflow: hidden;
            /*超出部分隐藏*/
            white-space: nowrap;
            /*禁止换行*/
            text-overflow: ellipsis;
            /*省略号*/
          }
  
          .detail_info_foot {
            margin-top: 5px;
            align-items: center;
  
            .doller {
              font-size: 12px;
              font-weight: bold;
              color: #333333;
            }
  
            .money {
              font-size: 18px;
              font-weight: bold;
              color: #333333;
            }
  
            .perv {
              font-size: 14px;
              color: #fa1e32;
              font-weight: bold;
  
            }
  
            .buy {
              font-size: 14px;
              color: #fa1e32;
              font-weight: bold;
  
            }
  
            .icon {
              font-size: 13px;
              font-weight: bold;
              color: #333333;
              border-radius: 50%;
              border: 1px solid #dcdcdc;
              width: 28px;
              height: 28px;
              text-align: center;
              margin-left: 40px;
              padding: 3px
            }
          }
        }
      }
    }
  
    .submit {
      height: 60px;
      margin-bottom: 50px;
      background: #eee;
  
      .input {
        width: 19px;
        height: 19px;
      }
  
      .allcheck {
        margin-left: 10px;
      }
    }
    .footer{
      height: 100px;
    }
  }</style>
  